<template>
  <div class="coupons_manage">
    <header>
      <el-form :model="searchForm">
        <el-form-item>
          <el-input v-model="searchForm.ticketName" placeholder="请输入优惠券名称"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="warning" class="addBtn" @click="addCouponsShow = true">添加优惠券</el-button>
    </header>

    <section>
      <el-table :data="tableData" border height="100%">
        <el-table-column label="优惠券名称" prop="ticketName" align="center"></el-table-column>
        <el-table-column label="类型" prop="preferentialType" align="center">
          <template slot-scope="scope">
            {{scope.row.preferentialType | typeFilter}}
          </template>
        </el-table-column>
        <el-table-column label="库存" prop="stock" align="center"></el-table-column>
        <el-table-column label="限领" align="center">
          <template slot-scope="scope">
            {{scope.row.limitQuantity | limitFilter}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
        <el-table-column label="有效期" prop="expiryDays" align="center">
          <template slot-scope="scope">
            {{scope.row.expiryDays | daysFilter}}
          </template>
        </el-table-column>
        <el-table-column label="优惠内容" align="center">
          <template slot-scope="scope">
            {{scope.row.discountRate | discountRateFilter}}
            {{scope.row.offsetMoney | moneyFilter}}
          </template>
        </el-table-column>
        <el-table-column label="线上展示状态" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              @change="changeStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteCoupons(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :current-page="searchForm.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="searchForm.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top: 10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog title="添加优惠券" :visible.sync="addCouponsShow" width="500px" :close-on-click-modal="false" :close-on-press-escape="false" :append-to-body="true">
      <addCoupons :id="shopId" v-if="addCouponsShow" @closeDialog="addCouponsShow = false" @refresh="getTableData" />
    </el-dialog>


  </div>
</template>

<script>
  import addCoupons from './addCoupons.vue'

  export default {
    components: { addCoupons },
    props: ['id'],
    filters: {
      discountRateFilter(discount) {
        return discount != null ? discount + '折' : ''
      },
      moneyFilter(money) {
        return money != null && money != 0 ? money + '元' : ''
      },
      limitFilter(limit) {
        return limit != null ? limit + '份' : '不限购'
      },
      typeFilter(type) {
        return type == 1 ? '满减' : '折扣'
      },
      daysFilter(day) {
        return day <= 0 ? '永久' : day + '天'
      }
    },
    data() {
      return {
        addCouponsShow: false,
        shopId: null,
        searchForm: {
          currentPage: 1,
          pageSize: 10
        },
        total: 0,
        tableData: []
      }
    },

    mounted() {
      this.shopId = this.id;
      this.searchForm.shopId = this.id;
      this.getTableData();
    },

    methods: {
      getTableData() {
        this.$axios({
          method: 'post',
          url: '/shop/shop-ticket/getTicketPage',
          data: this.$qs.stringify(this.searchForm)
        }).then((res) => {
          if(res.code == 200) {
            res.data.records.forEach(item => {
              item.status = item.status ==1 ? true : false
            })
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        })
      },

      deleteCoupons(row) {
        this.$confirm('此操作将永久删除该优惠券, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'post',
            url: '/shop/shop-ticket/delete',
            data: this.$qs.stringify({ticketId: row.id})
          }).then(res => {
            if(res.code == 200) {
              this.getTableData();
              this.$message.success('删除成功')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      changeStatus(item) {
        let data = {};
        data.ticketId = item.id;
        data.status = item.status == true ? 1 : 0;
        this.$axios({
          method: 'post',
          url: '/shop/shop-ticket/updateStatus',
          data: this.$qs.stringify(data)
        }).then((res) => {
          if(res.code == 200) {
            this.$message.success('线上展示状态修改成功')
          }
        })
      },

      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        // this.getTableData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.currentPage = val;
        // this.getTableData();
      },
    }
  }
</script>

<style scoped>
  .coupons_manage {
    height: calc(100vh - 158px);
  }

  header {
    height: 40px;
    position: relative;
    margin-bottom: 10px;
  }

  section {
    height: calc(100% - 90px);
  }

  footer {
    height: 40px;
  }
  .el-input {
    width: 200px;
  }

  .addBtn {
    position: absolute;
    right: 50px;
    top: 0;
  }




</style>
